<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Language" content="en" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test for ""</title>
	
	<style type="text/css" media="all">
	
	body {
		background: #fff;
		margin: 0;
		padding: 0;
		font-family: Arial;
		font-size: 12px;
	}
	
	ul.static {
		position: absolute; top: 10px; right: 10px;
		margin: 0;
	}
	
	ul.static li {
		background: #aaa;
		padding: 3px;
		margin: 2px;
		list-style-type: none;
		float: left;
	}
	
	ul.dynamic {
		background: #eee;
		margin: 10px;
		margin-top: 50px;
		padding: 10px;
		height: 600px;
	}
	
	ul.dynamic li {

		width: 33%;
		height: 100px;
		float: left;
		list-style-type: none;
	}
	
	ul.dynamic li div {
		background: #aaa;
		margin: 10px;
		height: 80px;
		border: 1px solid black;
	}
	
	.dropzone {
		background: #bbb;
	}
	
	.target {
		border: 2px dotted black;
	}
	
	.placeholder {
		background: blue;
	}
	
	</style>

	<script type="text/javascript" src="../jquery-1.2.4b.js"></script>

	<script type="text/javascript" src="../ui.core.js"></script>
	<script type="text/javascript" src="../ui.draggable.js"></script>
	<script type="text/javascript" src="../ui.droppable.js"></script>
	<script type="text/javascript" src="../ui.sortable.js"></script>
	<script type="text/javascript" src="../ui.resizable.js"></script>
	<script type="text/javascript" src="../ui.slider.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){
	
		//First, we initialize the sortable
		$('ul.dynamic').sortable({
			dropOnEmpty: true,
			placeholder: "placeholder",
			placeholderElement: 'div',
			revert: true,
			//appendTo: 'body',
			change: function(e, ui) {
				//console.log('change event on ', ui.instance.element);	
			},
			over: function(e, ui) {
				$(this).addClass('target'); //Adding a class that will add a border
				ui.placeholder.css($.data(ui.sender[0], 'sortable').placeholderElement.offset()); //So I have to relocate the placeholder by two pixels
			},
			out: function(e, ui) {
				$(this).removeClass('target');
			},
			activate: function() {
				$(this).addClass('dropzone'); //Possible drop zone
			},
			deactivate: function() {
				$(this).removeClass('dropzone'); //Possible drop zone
			},
		});
		
		//Now we initialize the draggables in the List Group
		$('ul.static li').draggable({
			helper: 'clone',
			connectToSortable: "ul.dynamic",
			toSortable: function() {
				console.log("I was moved into my sortable");
			},
			fromSortable: function() {
				console.log("I was moved out from my sortable");
			}
		});
	
	});
	</script>
</head>
<body>


		<ul class='dynamic'>
		    <li><div>Portlet 1</div></li>
		    <li><div>Portlet 2</div></li>
		    <li><div>Portlet 3</div></li>
		    <li><div>Portlet 4</div></li>
		    <li><div>Portlet 5</div></li>
		    <li><div>Portlet 6</div></li>
		</ul>
		
		<ul class='static'>
		    <li><div>List Group Item 1</div></li>
		    <li><div>List Group Item 2</div></li>
		    <li><div>List Group Item 3</div></li>
		    <li><div>List Group Item 4</div></li>
		    <li><div>List Group Item 5</div></li>
		</ul>


</body>
</html>

